<template>
  <tm-sheet :padding="[32, 20]" :margin="[0]" v-if="!searchFlag">
    <view class="custom-header">
      <view class="custom-header-extra" v-if="props.showBack">
        <img
          @click="goBack"
          src="../../static/header/back.svg"
          class="custom-header-use-svg"
        />
      </view>
      <view class="custom-header-avatar" v-else>
        <acatar :size="74" title="数据" :img="img" />
      </view>
      <view class="custom-header-extra">
        <img
          @click="search"
          src="../../static/header/search.svg"
          class="custom-header-use-svg"
        />
        <img
          @click="tips"
          src="../../static/header/add-circle.svg"
          class="custom-header-use-svg"
        />
        <img
          @click="download"
          v-show="props.showBack && !props.isSelectable"
          src="../../static/header/download.svg"
          class="custom-header-use-svg"
        />
        <img
          v-show="props.menuShow"
          @click="showdate = true"
          src="../../static/header/more.svg"
          class="custom-header-use-svg"
        />
      </view>
    </view>
    <tm-row style="padding: 40rpx 0" v-if="props.showBack">
      <HierarchyMenu
        :currentLevel="name"
        :isReturnClicked="isReturnClicked"
        @update:hierarchy="handleHierarchyUpdate"
        @reset-return-clicked="resetReturnClicked"
      />
    </tm-row>

    <view class="custom-tag-row-left">
      <tm-tag
        size="m"
        v-for="(item, index) in props.taglist"
        :key="index"
        class="custom-row-tag"
        :border="props.tagActive == item.tag ? 0 : 2"
        :color="props.tagActive == item.tag ? '#F2F3FF' : '#fff'"
        :fontColor="props.tagActive == item.tag ? '#366EF4' : '#424A57'"
        :label="item.count ? item.tag + '·' + item.count : item.tag"
        @click="changeTag(item)"
      >
      </tm-tag>
    </view>
  </tm-sheet>
  <tm-sheet v-if="searchFlag" :margin="[0]">
    <tm-row :column="12">
      <tm-col align="start" :col="10">
        <tm-input
          v-model="inputValue"
          :showClear="true"
          :searchWidth="120"
          @input="searchInfo"
          style="width: 100%"
        ></tm-input>
      </tm-col>
      <tm-col align="start" :col="2">
        <tm-text
          color="#0052D9"
          label="取消"
          :fontSize="36"
          @click="quitSearch"
          style="margin-left: 20rpx"
        ></tm-text>
      </tm-col>
    </tm-row>
  </tm-sheet>
  <tm-picker
    v-model:show="showdate"
    :columns="citydate"
    v-model="pickydata"
    v-model:model-str="dateStr"
    @confirm="btnConfirm"
  >
  </tm-picker>
  <tm-notification placement="top" ref="msg" label="消息提醒"></tm-notification>
</template>
<script lang="ts" setup>
import { ref, nextTick, watch } from 'vue'
import HierarchyMenu from '@/components/header/hierarchyMenu.vue'
import acatar from '../header/acatar.vue'
import orgCtl from '@/ts/controller'
import tmNotification from '@/tmui/components/tm-notification/tm-notification.vue'
const inputValue = ref('')
const name = ref<string>('数据')
const isReturnClicked = ref(false) // 控制返回信号
const showdate = ref(false)
const img = ref(orgCtl.user.share.avatar?.thumbnail)
const searchFlag = ref(false)
const citydate = ref([
  {
    text: '刷新目录',
    id: 0
    /* children: [
      { text: '子项目1', id: 10 },
      { text: '子项目2', id: 11 }
    ] */
  }
])
const pickydata = ref()
const dateStr = ref('')
const msg = ref<InstanceType<typeof tmNotification> | null>(null)
type Props = {
  currentDirectoryName: string
  taglist: any[]
  tagActive: string
  showBack: boolean
  menuShow: boolean
  isSelectable: boolean
}
const props = defineProps<Props>()
const emit = defineEmits([
  'btnClick',
  'searchClick',
  'goBack',
  'goMenu',
  'changeSelectable',
  'searchFlags'
])
watch(
  () => props.currentDirectoryName,
  newName => {
    if (newName) {
      name.value = newName
    }
  }
)
const download = () => {
  uni.hideTabBar()
  emit('changeSelectable', true)
}
const changeTag = (item: any) => {
  if (item) {
    emit('btnClick', item)
  }
}
//监听返回层级数组名称，看后续有没有要用的
const handleHierarchyUpdate = (newHierarchy: string[]) => {
  console.log('当前层级路径:', newHierarchy)
}
// 重置返回点击状态
const resetReturnClicked = () => {
  isReturnClicked.value = false
}
const goBack = () => {
  isReturnClicked.value = true // 设置为 true 以触发子组件的层级移除
  emit('goBack')
  emit('changeSelectable', false)
  uni.showTabBar()
}
const btnConfirm = () => {
  nextTick(() => {
    const path = dateStr.value.split('/')
    if (path.length) {
      emit('goMenu', ...path)
    }
  })
}
const tips = () => {
  nextTick(() => {
    msg.value?.show({ label: '等待开发中' })
  })
}
const search = () => {
  searchFlag.value = true
  emit('searchFlags', true)
  uni.hideTabBar()
}
const searchInfo = (value: string) => {
  emit('searchClick', value)
}
const quitSearch = () => {
  searchFlag.value = false
  emit('searchFlags', false)
  uni.showTabBar()
  emit('searchClick', '')
}
</script>
<style lang="scss">
.custom-tag-row-left {
  overflow-x: scroll;
  white-space: nowrap;
  padding-right: 20rpx;
  .custom-row-tag {
    margin-top: 12rpx;
    display: inline-block;
    white-space: nowrap;
  }
}
.custom-header {
  width: 100vw;
  height: 96rpx;
  padding: 16rpx 24rpx 16rpx 0rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  .custom-header-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .custom-header-use-svg {
      width: 50rpx;
      height: 50rpx;
      margin-right: 12rpx;
    }
  }
}
</style>
